<template>
	<view>
		<!-- list 商品列表 -->
		<view class="tui-product-list">
			<view class="tui-product-container" :style="{width: defaultOptions.isList ? '100%' : '49.2%'}">
				<block v-for="(item,index) in goodsData.list" :key="index" v-if="(index+1)%2!=0 || defaultOptions.isList">
					<view class="tui-pro-item" :class="[defaultOptions.isList?'tui-flex-list':'']" hover-class="hover" :hover-start-time="150" @tap.stop="gotoDetail(item)">
						<view class="goods-cover">
							<image :src="item.goods_warehouse.cover_pic" class="tui-pro-img" :class="[defaultOptions.isList?'tui-proimg-list':'']"
							 mode="scaleToFill" />
							 <view class='store' v-if="item.goods.mch_id > 0">
								<view>{{item.store.name}}</view>
								<view style="font-size: 8pt;" v-if="item.distance">大约{{item.distance}}</view>
							 </view>
						</view>
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{item.goods_warehouse.name}}</view>
							<view>
								<view class="tui-pro-price flex flex-y-center">
									<view class="tui-sale-price" style="color:#C51A15">￥{{item.goods.price}}</view>
									<view class="tui-factory-price">￥{{item.goods_warehouse.original_price}}</view>
								</view>
								<view class="goods-sales">已售{{item.total_sales}}{{item.goods_warehouse.unit}}</view>
								
								<view class="tui-pro-pay" >
									<text class='tags' v-if="item.goods.mch_id == 0">自营</text>
									<text class='tags' v-for="itm in item.cats" :key="itm.id">{{itm.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="tui-product-container" v-if="!defaultOptions.isList">
				<block v-for="(item,index) in goodsData.list" :key="index" v-if="(index+1)%2==0">
					<view class="tui-pro-item" :class="[defaultOptions.isList?'tui-flex-list':'']" hover-class="hover" :hover-start-time="150" @tap.stop="gotoDetail(item)">
						 <view class="goods-cover">
						 	<image :src="item.goods_warehouse.cover_pic" class="tui-pro-img" :class="[defaultOptions.isList?'tui-proimg-list':'']"
						 	 mode="scaleToFill" />
						 	 <view class='store' v-if="item.goods.mch_id > 0">
								<view>{{item.store.name}}</view>
								<view style="font-size: 8pt;" v-if="item.distance">大约{{item.distance}}</view>
						 	 </view>
						 </view>
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{item.goods_warehouse.name}}</view>
							<view>
								
								<view class="tui-pro-price flex flex-y-center">
									<view class="tui-sale-price" style="color:#C51A15">￥{{item.goods.price}}</view>
									<view class="tui-factory-price">￥{{item.goods_warehouse.original_price}}</view>
								</view>
								<view class="goods-sales">已售{{item.total_sales}}{{item.goods_warehouse.unit}}</view>
		
								<view class="tui-pro-pay" >
									<text class='tags' v-if="item.goods.mch_id == 0">自营</text>
									<text class='tags' v-for="itm in item.cats" :key="itm.id">{{itm.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- list 商品列表 -->
		
		<!--list-->
		<backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>
		
		<!--加载loadding-->
		<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
		<main-nomore :visible="pullUpOn" bgcolor="#f7f7f7"></main-nomore>
	</view>
</template>

<script>
	import backTop from '@/components/back-top/back-top.vue';
	
	export default {
		name:"com-goods-list",
		components:{
			backTop
		},
		props:{
			options:{
				type:Object,
				default:function () {
					return {}
				}
			}
		},
		data() {
			let defaultApi = this.$api.goods.rightList;
			return {
				defaultOptions:{
					listDataApi:defaultApi,//获取数据的接口
					queryParams:{},//获取数据的参数
					pageSize:6,    // 一页查询多少条
					redirectUrl:'/works-detail',//点击后跳转的详情地址
					isList: false, //是否以列表展示  | 列表或大图
					detailPage:'/pages/goods/detail'
				},
				goodsData:{
					list:[],
					page:1,
					total:0,
					pageSize:6,
					page_count:0
				},
				requestFlag:true,
				pullUpOn:false,
				backTop: {
					src: '/static/back-top/top.png',
					scrollTop: 0
				},
				loadding:false
			};
		},
		created(){
			this.defaultOptions = {...this.defaultOptions,...this.options};
			this.goodsData.pageSize = this.defaultOptions.pageSize;
			this.getList();
		},
		watch:{
			options:{
				handler(val){
					this.defaultOptions = {...this.defaultOptions,...val};
					this.goodsData.list = [];
					this.goodsData.page = 1;
					this.getList();
				},
				deep:true,//开启深度监听，监听options里面的属性变化
				immediate:false
			}
		},
		methods:{
			getList(){
				if(!this.requestFlag){
					return
				}
				this.loadding = true;
				this.requestFlag = false;	//请求中切换为不可请求
				if(this.cat_id == 12 && !this.order && !this.orderBy){
					// 购物券专区默认价格排序低-高
					this.order = 'price';
					this.orderBy = 'asc';
				}
				
				let params = {
					page:this.goodsData.page,
					limit:this.goodsData.pageSize,
					...this.defaultOptions.queryParams
				};
				this.$http.request({
					url: this.defaultOptions.listDataApi,
					method:'post',
					data:params
				}).then(res => {
					this.requestFlag = true;//请求完成切换为可以请求
					this.loadding = false;
					if(res.code == 0){
						this.goodsData.list = this.goodsData.list.concat(res.data.list);
						this.goodsData.total = res.data.pagination.total_count;
						this.goodsData.page_count = res.data.pagination.page_count;
						if(this.goodsData.page >= this.goodsData.page_count){
							this.pullUpOn = true;
						}
					}
				})
			},
			loadMore(){
				this.goodsData.page++;
				if(this.goodsData.page <= this.goodsData.page_count){
					this.getList();
				}
			},
			PageScrollHandler(e){
				this.backTop.scrollTop = e.scrollTop;
			},
			gotoDetail(row){
				let proId = row.goods.id;
				let url = this.defaultOptions.detailPage + "?proId=" + proId;
				uni.navigateTo({
					url
				})
			}
		},
		
	}
</script>

<style lang="less">
	.tui-product-list {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
	.tui-product-container {
		width: 48%;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		/* border-radius: 12rpx; */
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}
	.tui-flex-list {
		display: flex;
		margin-bottom: 16rpx !important;
	}
	.goods-cover{
		position: relative;
	}
	.store{
		position: absolute;
		bottom:0;
		background-color: rgba(0,0,0,.4);
		width: 100%;
		color:#FFFFFF;
		padding:8rpx 15rpx;
		font-size: 10pt;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tui-pro-img {
		width: 100%;
		height: 360rpx;
		display: block;
	}
	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		/* border-radius: 12rpx; */
	}
	.store{
		position: absolute;
		bottom:0;
		background-color: rgba(0,0,0,.4);
		width: 100%;
		color:#FFFFFF;
		padding:8rpx 15rpx;
		font-size: 10pt;
	}
	.tui-pro-content {
		width:100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 5rpx;
	}
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 9pt;
		height: 72rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.tui-pro-price {
		padding-top: 5rpx;
		flex-wrap: wrap;
	}
	
	.tui-sale-price {
		font-size: 12pt;
		font-weight: 500;
		color: #e41f19;
		padding-right: 5rpx;
	}
	.tui-factory-price {
		font-size: 9pt;
		color: #a0a0a0;
		text-decoration: line-through;
	}
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 9pt;
		color: #656565;
		display: flex;
		flex-wrap: wrap;
	}
	.tags{
		background-color: #C51A15;
		border-radius: 10rpx;
		padding: 4rpx 10rpx;
		color:#FFFFFF;
		margin:5rpx;
	}
	.goods-sales{
		font-size: 9pt;
		color: #a0a0a0;
	}
</style>
